नेविगेशन एपीआई में महारत: सिंगल पेज एप्लीकेशन रूटिंग और हिस्ट्री मैनेजमेंट

नेविगेशन एपीआई सिंगल पेज एप्लीकेशन (SPAs) के भीतर रूटिंग और हिस्ट्री मैनेजमेंट को संभालने के तरीके में एक महत्वपूर्ण प्रगति का प्रतिनिधित्व करता है। पारंपरिक तरीके अक्सर `window.location` ऑब्जेक्ट में हेरफेर करने या थर्ड-पार्टी लाइब्रेरी का उपयोग करने पर निर्भर करते हैं। यद्यपि इन तरीकों ने हमारी अच्छी सेवा की है, नेविगेशन एपीआई एक अधिक सुव्यवस्थित, प्रदर्शनशील और सुविधा संपन्न समाधान प्रदान करता है, जो डेवलपर्स को उपयोगकर्ता के नेविगेशन अनुभव पर अधिक नियंत्रण प्रदान करता है।

नेविगेशन एपीआई क्या है?

नेविगेशन एपीआई एक आधुनिक ब्राउज़र एपीआई है जिसे SPAs द्वारा नेविगेशन, रूटिंग और हिस्ट्री को प्रबंधित करने के तरीके को सरल और बेहतर बनाने के लिए डिज़ाइन किया गया है। यह एक नया `navigation` ऑब्जेक्ट पेश करता है, जो ऐसे मेथड और इवेंट प्रदान करता है जो डेवलपर्स को नेविगेशन इवेंट्स को इंटरसेप्ट और नियंत्रित करने, यूआरएल को अपडेट करने और पूरे पेज को पुनः लोड किए बिना एक सुसंगत ब्राउज़िंग हिस्ट्री बनाए रखने की अनुमति देते हैं। इसके परिणामस्वरूप एक तेज़, सहज और अधिक प्रतिक्रियाशील उपयोगकर्ता अनुभव प्राप्त होता है।

नेविगेशन एपीआई का उपयोग करने के लाभ

• बेहतर प्रदर्शन: पूरे पेज को फिर से लोड करने की आवश्यकता को समाप्त करके, नेविगेशन एपीआई SPAs के प्रदर्शन में काफी सुधार करता है। विभिन्न व्यूज़ के बीच संक्रमण तेज़ और सहज हो जाता है, जिससे उपयोगकर्ता का अनुभव अधिक आकर्षक होता है।
• उन्नत नियंत्रण: यह एपीआई नेविगेशन इवेंट्स पर बारीक नियंत्रण प्रदान करता है, जिससे डेवलपर्स आवश्यकतानुसार नेविगेशन व्यवहार को रोक सकते हैं और संशोधित कर सकते हैं। इसमें नेविगेशन को रोकना, उपयोगकर्ताओं को रीडायरेक्ट करना, और नेविगेशन होने से पहले या बाद में कस्टम लॉजिक चलाना शामिल है।
• सरलीकृत हिस्ट्री मैनेजमेंट: नेविगेशन एपीआई के साथ ब्राउज़र के हिस्ट्री स्टैक का प्रबंधन करना आसान हो जाता है। डेवलपर्स प्रोग्रामेटिक रूप से हिस्ट्री एंट्रीज़ को जोड़, बदल और ट्रैवर्स कर सकते हैं, जिससे एक सुसंगत और पूर्वानुमेय ब्राउज़िंग अनुभव सुनिश्चित होता है।
• घोषणात्मक नेविगेशन: नेविगेशन एपीआई रूटिंग के लिए एक अधिक घोषणात्मक दृष्टिकोण को प्रोत्साहित करता है, जिससे डेवलपर्स नेविगेशन नियमों और व्यवहारों को स्पष्ट और संक्षिप्त तरीके से परिभाषित कर सकते हैं। इससे कोड की पठनीयता और रखरखाव में सुधार होता है।
• आधुनिक फ्रेमवर्क के साथ एकीकरण: नेविगेशन एपीआई को आधुनिक जावास्क्रिप्ट फ्रेमवर्क और लाइब्रेरी, जैसे कि React, Angular, और Vue.js के साथ सहजता से एकीकृत करने के लिए डिज़ाइन किया गया है। यह डेवलपर्स को अपने मौजूदा डेवलपमेंट वर्कफ़्लो के भीतर एपीआई की सुविधाओं का लाभ उठाने की अनुमति देता है।

मुख्य अवधारणाएं और विशेषताएं

1. The `navigation` Object

नेविगेशन एपीआई का केंद्र `navigation` ऑब्जेक्ट है, जो ग्लोबल `window` ऑब्जेक्ट (यानी, `window.navigation`) के माध्यम से उपलब्ध है। यह ऑब्जेक्ट नेविगेशन से संबंधित विभिन्न गुणों और विधियों तक पहुंच प्रदान करता है, जिनमें शामिल हैं:

• `currentEntry`: एक `NavigationHistoryEntry` ऑब्जेक्ट लौटाता है जो नेविगेशन हिस्ट्री में वर्तमान एंट्री का प्रतिनिधित्व करता है।
• `entries()`: नेविगेशन हिस्ट्री में सभी एंट्रीज़ का प्रतिनिधित्व करने वाले `NavigationHistoryEntry` ऑब्जेक्ट्स की एक ऐरे लौटाता है।
• `navigate(url, { state, info, replace })`: एक नए URL पर नेविगेट करता है।
• `back()`: पिछली हिस्ट्री एंट्री पर वापस नेविगेट करता है।
• `forward()`: अगली हिस्ट्री एंट्री पर आगे नेविगेट करता है।
• `reload()`: वर्तमान पेज को पुनः लोड करता है।
• `addEventListener(event, listener)`: नेविगेशन-संबंधित इवेंट्स के लिए एक इवेंट लिसनर जोड़ता है।

2. `NavigationHistoryEntry`

`NavigationHistoryEntry` इंटरफ़ेस नेविगेशन हिस्ट्री में एक एकल एंट्री का प्रतिनिधित्व करता है। यह एंट्री के बारे में जानकारी प्रदान करता है, जैसे कि उसका URL, स्टेट, और अद्वितीय ID।

• `url`: हिस्ट्री एंट्री का URL।
• `key`: हिस्ट्री एंट्री के लिए एक अद्वितीय पहचानकर्ता।
• `id`: एक और अद्वितीय पहचानकर्ता, जो विशेष रूप से एक नेविगेशन इवेंट के जीवनचक्र को ट्रैक करने के लिए उपयोगी है।
• `sameDocument`: एक बूलियन जो इंगित करता है कि नेविगेशन का परिणाम समान-दस्तावेज़ नेविगेशन है या नहीं।
• `getState()`: हिस्ट्री एंट्री से जुड़े स्टेट को लौटाता है (नेविगेशन के दौरान सेट किया गया)।

3. नेविगेशन इवेंट्स

नेविगेशन एपीआई कई इवेंट्स भेजता है जो डेवलपर्स को नेविगेशन व्यवहार की निगरानी और नियंत्रण करने की अनुमति देते हैं। इन इवेंट्स में शामिल हैं:

• `navigate`: जब कोई नेविगेशन शुरू होता है (जैसे, किसी लिंक पर क्लिक करना, फॉर्म सबमिट करना, या `navigation.navigate()` को कॉल करना) तो यह डिस्पैच होता है। यह नेविगेशन अनुरोधों को रोकने और संभालने के लिए प्राथमिक इवेंट है।
• `navigatesuccess`: जब कोई नेविगेशन सफलतापूर्वक पूरा हो जाता है तो यह डिस्पैच होता है।
• `navigateerror`: जब कोई नेविगेशन विफल हो जाता है (जैसे, नेटवर्क त्रुटि या अनहैंडल्ड एक्सेप्शन के कारण) तो यह डिस्पैच होता है।
• `currentchange`: जब वर्तमान हिस्ट्री एंट्री बदलती है (जैसे, आगे या पीछे नेविगेट करते समय) तो यह डिस्पैच होता है।
• `dispose`: जब एक NavigationHistoryEntry अब पहुंच योग्य नहीं होता है, जैसे कि जब इसे `replaceState` ऑपरेशन के दौरान हिस्ट्री से हटा दिया जाता है, तब यह डिस्पैच होता है।

नेविगेशन एपीआई के साथ रूटिंग लागू करना: एक व्यावहारिक उदाहरण

आइए देखें कि एक सरल SPA में बुनियादी रूटिंग को लागू करने के लिए नेविगेशन एपीआई का उपयोग कैसे करें। एक ऐसे एप्लिकेशन पर विचार करें जिसमें तीन व्यू हैं: होम, अबाउट, और कॉन्टैक्ट।

सबसे पहले, रूट परिवर्तनों को संभालने के लिए एक फ़ंक्शन बनाएं:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
होम
होम पेज पर आपका स्वागत है!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
अबाउट
हमारे बारे में और जानें।
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
कॉन्टैक्ट
हमसे संपर्क करें।
';
      break;
    default:
      contentDiv.innerHTML = '
404 नहीं मिला
पेज नहीं मिला।
';
  }
}

अगला, `navigate` इवेंट में एक इवेंट लिसनर जोड़ें:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // डिफ़ॉल्ट ब्राउज़र नेविगेशन को रोकें

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // रूट हैंडलिंग के बाद प्रॉमिस को रिज़ॉल्व करें
  });

  event.transition = promise;
});

यह कोड `navigate` इवेंट को इंटरसेप्ट करता है, `event.destination` ऑब्जेक्ट से URL निकालता है, डिफ़ॉल्ट ब्राउज़र नेविगेशन को रोकता है, सामग्री को अपडेट करने के लिए `handleRouteChange` को कॉल करता है, और `event.transition` प्रॉमिस सेट करता है। `event.transition` सेट करना यह सुनिश्चित करता है कि ब्राउज़र पेज को विज़ुअली अपडेट करने से पहले कंटेंट अपडेट के पूरा होने की प्रतीक्षा करता है।

अंत में, आप ऐसे लिंक बना सकते हैं जो नेविगेशन को ट्रिगर करते हैं:

होम | अबाउट | कॉन्टैक्ट

और उन लिंक पर एक क्लिक लिसनर संलग्न करें:

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A' && event.target.hasAttribute('data-navigo')) {
    event.preventDefault();
    window.navigation.navigate(event.target.href);
  }
});

यह नेविगेशन एपीआई का उपयोग करके बुनियादी क्लाइंट-साइड रूटिंग सेट करता है। अब, लिंक पर क्लिक करने से एक नेविगेशन इवेंट ट्रिगर होगा जो पूरे पेज को पुनः लोड किए बिना `content` डिव की सामग्री को अपडेट करेगा।

स्टेट मैनेजमेंट जोड़ना

नेविगेशन एपीआई आपको प्रत्येक हिस्ट्री एंट्री के साथ स्टेट संबद्ध करने की भी अनुमति देता है। यह नेविगेशन इवेंट्स के बीच डेटा को संरक्षित करने के लिए उपयोगी है। आइए एक स्टेट ऑब्जेक्ट शामिल करने के लिए पिछले उदाहरण को संशोधित करें।

`navigation.navigate()` को कॉल करते समय, आप एक `state` ऑब्जेक्ट पास कर सकते हैं:

window.navigation.navigate('/about', { state: { pageTitle: 'हमारे बारे में' } });

`navigate` इवेंट लिसनर के अंदर, आप `event.destination.getState()` का उपयोग करके स्टेट तक पहुँच सकते हैं:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  const state = event.destination.getState();
  event.preventDefault();

  const promise = new Promise((resolve) => {
      handleRouteChange(url, state);
      resolve();
  });
  event.transition = promise;

});

function handleRouteChange(url, state = {}) {
  const contentDiv = document.getElementById('content');
  let title = state.pageTitle || 'मेरा ऐप'; // डिफ़ॉल्ट शीर्षक

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
होम
होम पेज पर आपका स्वागत है!
';
      title = 'होम';
      break;
    case '/about':
      contentDiv.innerHTML = '
अबाउट
हमारे बारे में और जानें।
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
कॉन्टैक्ट
हमसे संपर्क करें।
';
      break;
    default:
      contentDiv.innerHTML = '
404 नहीं मिला
पेज नहीं मिला।
';
      title = '404 नहीं मिला';
  }
  document.title = title;
}

इस संशोधित उदाहरण में, `handleRouteChange` फ़ंक्शन अब एक `state` पैरामीटर स्वीकार करता है और दस्तावेज़ के शीर्षक को अपडेट करने के लिए इसका उपयोग करता है। यदि कोई स्टेट पास नहीं किया जाता है, तो यह 'मेरा ऐप' पर डिफ़ॉल्ट होता है।

`navigation.updateCurrentEntry()` का उपयोग करना

कभी-कभी आप एक नया नेविगेशन ट्रिगर किए बिना वर्तमान हिस्ट्री एंट्री के स्टेट को अपडेट करना चाह सकते हैं। `navigation.updateCurrentEntry()` विधि आपको ऐसा करने की अनुमति देती है। उदाहरण के लिए, यदि कोई उपयोगकर्ता वर्तमान पेज पर एक सेटिंग बदलता है, तो आप उस परिवर्तन को दर्शाने के लिए स्टेट को अपडेट कर सकते हैं:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('सेटिंग अपडेट की गई:', setting, 'को', value);
}

// उदाहरण उपयोग:
updateUserSetting('theme', 'dark');

यह फ़ंक्शन वर्तमान स्टेट को पुनः प्राप्त करता है, अपडेट की गई सेटिंग को मर्ज करता है, और फिर वर्तमान हिस्ट्री एंट्री को नए स्टेट के साथ अपडेट करता है।

उन्नत उपयोग के मामले और विचार

1. फॉर्म सबमिशन को संभालना

नेविगेशन एपीआई का उपयोग SPAs में फॉर्म सबमिशन को संभालने, पूरे पेज को फिर से लोड होने से रोकने और एक अधिक सहज उपयोगकर्ता अनुभव प्रदान करने के लिए किया जा सकता है। आप फॉर्म सबमिशन इवेंट को इंटरसेप्ट कर सकते हैं और URL को अपडेट करने और पूरे पेज को फिर से लोड किए बिना परिणाम प्रदर्शित करने के लिए `navigation.navigate()` का उपयोग कर सकते हैं।

2. एसिंक्रोनस ऑपरेशंस

नेविगेशन इवेंट्स को संभालते समय, आपको एसिंक्रोनस ऑपरेशन करने की आवश्यकता हो सकती है, जैसे कि किसी एपीआई से डेटा लाना। `event.transition` प्रॉपर्टी आपको नेविगेशन इवेंट के साथ एक प्रॉमिस को संबद्ध करने की अनुमति देती है, यह सुनिश्चित करते हुए कि ब्राउज़र पेज को अपडेट करने से पहले एसिंक्रोनस ऑपरेशन के पूरा होने की प्रतीक्षा करता है। ऊपर के उदाहरण देखें।

3. स्क्रॉल रेस्टोरेशन

एक अच्छा उपयोगकर्ता अनुभव प्रदान करने के लिए नेविगेशन के दौरान स्क्रॉल स्थिति बनाए रखना महत्वपूर्ण है। नेविगेशन एपीआई हिस्ट्री में वापस या आगे नेविगेट करते समय स्क्रॉल स्थिति को बहाल करने के लिए तंत्र प्रदान करता है। आप स्क्रॉल स्थिति को स्टोर और रिस्टोर करने के लिए `NavigationHistoryEntry` की `scroll` प्रॉपर्टी का उपयोग कर सकते हैं।

4. एरर हैंडलिंग

नेविगेशन के दौरान होने वाली त्रुटियों, जैसे नेटवर्क त्रुटियों या अनहैंडल्ड एक्सेप्शन को संभालना आवश्यक है। `navigateerror` इवेंट आपको इन त्रुटियों को पकड़ने और शालीनता से संभालने की अनुमति देता है, जिससे एप्लिकेशन को क्रैश होने या उपयोगकर्ता को त्रुटि संदेश प्रदर्शित करने से रोका जा सकता है।

5. प्रोग्रेसिव एनहांसमेंट

नेविगेशन एपीआई के साथ SPAs बनाते समय, प्रोग्रेसिव एनहांसमेंट पर विचार करना महत्वपूर्ण है। सुनिश्चित करें कि आपका एप्लिकेशन सही ढंग से काम करता है, भले ही नेविगेशन एपीआई ब्राउज़र द्वारा समर्थित न हो। आप `navigation` ऑब्जेक्ट की उपस्थिति की जांच करने के लिए फ़ीचर डिटेक्शन का उपयोग कर सकते हैं और यदि आवश्यक हो तो पारंपरिक रूटिंग विधियों पर वापस आ सकते हैं।

पारंपरिक रूटिंग विधियों के साथ तुलना

SPAs में पारंपरिक रूटिंग विधियां अक्सर `window.location` ऑब्जेक्ट में हेरफेर करने या `react-router` या `vue-router` जैसी थर्ड-पार्टी लाइब्रेरी का उपयोग करने पर निर्भर करती हैं। जबकि ये विधियां व्यापक रूप से उपयोग की जाती हैं और अच्छी तरह से स्थापित हैं, उनकी कुछ सीमाएं हैं:

• पूरे पेज का पुनः लोड होना: `window.location` में सीधे हेरफेर करने से पूरे पेज का पुनः लोड हो सकता है, जो धीमा और उपयोगकर्ता अनुभव में बाधा डाल सकता है।
• जटिलता: पारंपरिक तरीकों से हिस्ट्री और स्टेट का प्रबंधन जटिल और त्रुटि-प्रवण हो सकता है, खासकर बड़े और जटिल अनुप्रयोगों में।
• प्रदर्शन ओवरहेड: थर्ड-पार्टी रूटिंग लाइब्रेरी महत्वपूर्ण प्रदर्शन ओवरहेड जोड़ सकती हैं, खासकर यदि वे आपके एप्लिकेशन की विशिष्ट आवश्यकताओं के लिए अनुकूलित नहीं हैं।

नेविगेशन एपीआई रूटिंग और हिस्ट्री मैनेजमेंट के लिए एक अधिक सुव्यवस्थित, प्रदर्शनशील और सुविधा संपन्न समाधान प्रदान करके इन सीमाओं को संबोधित करता है। यह पूरे पेज के पुनः लोड को समाप्त करता है, हिस्ट्री मैनेजमेंट को सरल बनाता है, और नेविगेशन इवेंट्स पर बारीक नियंत्रण प्रदान करता है।

ब्राउज़र संगतता

2024 के अंत तक, नेविगेशन एपीआई को क्रोम, फ़ायरफ़ॉक्स, सफारी और एज सहित आधुनिक ब्राउज़रों में अच्छा समर्थन प्राप्त है। हालाँकि, अपने उत्पादन अनुप्रयोगों में नेविगेशन एपीआई को लागू करने से पहले Can I use जैसे संसाधनों पर नवीनतम ब्राउज़र संगतता जानकारी की जांच करना हमेशा एक अच्छा अभ्यास है। यदि पुराने ब्राउज़र का समर्थन आवश्यक है, तो पॉलीफ़िल या फ़ॉलबैक तंत्र का उपयोग करने पर विचार करें।

निष्कर्ष

नेविगेशन एपीआई उन्नत रूटिंग और हिस्ट्री मैनेजमेंट क्षमताओं के साथ आधुनिक, प्रदर्शनशील SPAs बनाने के लिए एक शक्तिशाली उपकरण है। एपीआई की सुविधाओं का लाभ उठाकर, डेवलपर्स तेज़, सहज और अधिक आकर्षक उपयोगकर्ता अनुभव बना सकते हैं। यद्यपि प्रारंभिक सीखने की अवस्था सरल, पुराने तरीकों का उपयोग करने की तुलना में थोड़ी कठिन हो सकती है, नेविगेशन एपीआई के लाभ, विशेष रूप से जटिल अनुप्रयोगों में, इसे एक सार्थक निवेश बनाते हैं। नेविगेशन एपीआई को अपनाएं और अपने SPAs की पूरी क्षमता को अनलॉक करें।

आगे की सीख

• MDN वेब डॉक्स: नेविगेशन एपीआई
• WICG नेविगेशन एपीआई स्पेसिफिकेशन